<script setup>
import { ref } from 'vue'

let props = defineProps(['entityDataItem'])
let entityDataItem = props.entityDataItem

let model4Active = ref(1)
const onModel202Active = (page) => {
    model4Active.value = page
}

</script>


<template>
    <div class="model202-box">
        <div class="model202-box-son">
            <div v-if="entityDataItem.field11" @click="onModel202Active(1)" :class="model4Active == 1 ? 'active' : ''">
                <p>{{ entityDataItem.field11 }}</p>
            </div>
            <div v-if="entityDataItem.field12" @click="onModel202Active(2)" :class="model4Active == 2 ? 'active' : ''">
                <p>{{ entityDataItem.field12 }}</p>
            </div>
            <div v-if="entityDataItem.field13" @click="onModel202Active(3)" :class="model4Active == 3 ? 'active' : ''">
                <p>{{ entityDataItem.field13 }}</p>
            </div>
        </div>
    </div>

</template>


<style scoped>
.model202-box {
    width: 100%;
    height: 2.6rem;
    margin-bottom: 0.4rem;
}

.model202-box-son {
    width: 100%;
    height: 100%;
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
}

.model202-box-son>div {
    width: 2.7rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}

.model202-box-son>.active {
    border-bottom: 0.12rem solid rgb(236, 128, 66);
}
</style>
